<template>
	<view>
		<uv-popup ref="popup" mode="bottom" round="32rpx">
			<view class="device-filter-pop-layout">
				<view class="device-filter-pop-header">筛选条件</view>
				<scroll-view class="scrollView" scroll-y>
					<view class="scroll-container">
						<!-- 绑定状态 -->
						<view class="scroll-group">
							<view class="scroll-group-header">收益类型</view>
							<view class="scroll-group-list">
								<view class="scroll-group-list-item" :class="[item.isSelect ? 'scroll-group-list-item-select' : '']" v-for="item in typeList" :key="item.profitTypeCode" @tap="didSelectType(item)">
									<text>{{item.incomeName}}</text>
								</view>
							</view>
						</view>
						<!-- 产品政策 -->
						<view class="scroll-group">
							<view class="scroll-group-header">产品政策</view>
							<view class="scroll-group-list">
								<view class="scroll-group-list-item" :class="[item.isSelect ? 'scroll-group-list-item-select' : '']" v-for="item in policyList" :key="item.policyId" @tap="didSelectPolicyStatus(item)">
									<text>{{item.policyName}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="device-filter-pop-bottom">
					<text @tap="close">取消</text>
					<text @tap="submit">确定</text>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { getAgentPolicyProfitType,getAgentPolicy } from '@/common/api/api.js'
	const popup = ref(null)
	const emits = defineEmits(['filterResult'])
	// 收益类型
	const typeList = ref([])
	const policyList = ref([])
	const open = (selectTypeCode = '',selectPolicyId = '') => {
		Promise.all([
			getFilterTypeData(selectTypeCode),
			getFilterPolicyData(selectPolicyId)
		])
		popup.value.open()
	}
	const close = () => {
		popup.value.close()
	}
	//选择绑定状态
	const didSelectType = (item) => {
		typeList.value.forEach((model) => {
			model.isSelect = item.profitTypeCode == model.profitTypeCode
		})
	}
	//选择产品政策状态
	const didSelectPolicyStatus = (item) => {
		policyList.value.forEach((model) => {
			model.isSelect = item.policyId == model.policyId
		})
	}
	// 确认
	const submit = () => {
		close()
		const typeRes = typeList.value.filter(item => item.isSelect)
		const policyRes = policyList.value.filter(item => item.isSelect)
		emits('filterResult', { typeId: typeRes[0].profitTypeCode, policyId: policyRes[0].policyId })
	}
	// 获取筛选类型数据
	const getFilterTypeData = async (selectCode)=>{
		const res = await getAgentPolicyProfitType()
		typeList.value = res.result
		typeList.value.unshift({incomeName:'全部',profitTypeCode:'',isSelect:true})
		typeList.value.forEach(item=>{
			item.isSelect = item.profitTypeCode == selectCode
		})
	}
	// 获取筛选政策数据
	const getFilterPolicyData = async (policyId)=>{
		const res = await getAgentPolicy()
		policyList.value = res.result
		policyList.value.unshift({policyName:'全部',policyId:'',isSelect:true})
		policyList.value.forEach(item=>{
			item.isSelect = item.policyId == policyId
		})
	}
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>
	.device-filter-pop-layout {
		.device-filter-pop-header {
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			padding: 30rpx;
		}

		.scrollView {
			height: 800rpx;

			.scroll-container {
				padding: 30rpx;

				.scroll-group-header {
					padding-bottom: 30rpx;
				}

				.scroll-group-list {
					display: flex;
					flex-wrap: wrap;

					.scroll-group-list-item {
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 0 50rpx;
						height: 68rpx;
						border-radius: 34rpx;
						background-color: #F5F7FA;
						margin-right: 30rpx;
						color: $xh-color-6;
						font-size: 26rpx;
						margin-bottom: 30rpx;
					}

					.scroll-group-list-item-select {
						color: #fff;
						background-color: $xh-theme-color;
					}
				}
			}
		}

		.device-filter-pop-bottom {
			display: flex;
			align-items: center;
			
			text {
				flex: 1;
				text-align: center;
				color: #fff;
				height: 88rpx;
				line-height: 88rpx;
			}
			text:nth-child(1) {
				background-color: #fff;
				color: $xh-color-3;
				border-top: 1px solid #eee;
			}

			text:nth-child(2) {
				background-color: $xh-theme-color;
				border-top: 1px solid $xh-theme-color;
			}
		}
	}
</style>